<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>哔哩哔哩</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="blbl.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<!--头部区域-->
<div class="header">
    <div class="bground">
        <img src="image/bground.png" alt="">

        <div class="navOne">
            <img class="logo" src="image/logo.png" alt="" style="width: 190px ;height: 80px">
            <ul>
                <li>主站</li>
                <li>番剧</li>
                <li>游戏中心</li>
                <li>直播</li>
                <li>会员购</li>
                <li>漫画</li>
                <li>赛事</li>
                <li class="iconfont icon-shouji">下载App</li>
            </ul>
        </div>
        <div class="search">
            <input type="text">
            <button></button>
        </div>
        <div class="navTwo">
            <ul>
                <li><img class="user" src="image/user.png" alt=""></li>
                <li>大会员</li>
                <li>消息</li>
                <li>动态</li>
                <li>收藏</li>
                <li>历史</li>
                <li>创作中心</li>
                <li>
                    <button>投稿</button>
                </li>
            </ul>
        </div>
    </div>

</div>
<!--内容部分一-->
<div class="body">
    <span class="spanOne">
      <ul>
          <li class="iconfont icon-shouye">
              <h5>首页</h5>
          </li>
          <li>
              <img class="state" src="image/state.png" alt="">
              <h5>动态</h5>
          </li>
          <li class="iconfont icon-remen">
             <h5>热门</h5>
          </li>
          <li class="iconfont icon-xinyongqiapindao">
             <h5>频道</h5>
          </li>
      </ul>

    </span>
    <span class="spanTwo">
         <ul class="firstul">
         <li>动画 <em>999+</em></li>
         <li>音乐 <em>999+</em></li>
         <li>舞蹈 <em>999+</em></li>
         <li>知识 <em>999+</em></li>
         <li>生活 <em>999+</em></li>
         <li>时尚 <em>999+</em></li>
         <li>娱乐 <em>999+</em></li>
         <li>放映厅 <em>999+</em></li>
         </ul>
        <ul class="secondul">
         <li>番剧 <em>999+</em></li>
         <li>国创 <em>999+</em></li>
         <li>游戏 <em>999+</em></li>
         <li>科技 <em>999+</em></li>
         <li>鬼畜 <em>999+</em></li>
         <li>资讯 <em>999+</em></li>
         <li>影视 <em>999+</em></li>
         <li>更多 <i class="iconfont icon-gengduo"></i></li>
        </ul>
    </span>
    <span class=spanThree>
       <ul class="thirdul">
        <li class="iconfont icon-zhuanlan"><a href="">专栏</a></li>
        <li class="iconfont icon-_huodong"><a href="">活动</a></li>
        <li class="iconfont icon-tiancheng"><a href="">小黑屋</a></li>
       </ul>
          <ul class="fourul">
        <li class="iconfont icon-zhibo"><a href="">直播</a></li>
        <li class="iconfont icon-ketang"><a href="">课堂</a></li>
        <li class="iconfont icon-gequ"><a href="">新歌</a></li>
       </ul>
    </span>
</div>
<!--内容部分二-->
<div class="content">
    <!--轮播图-->
    <div class="swiper">
        <div id="carousel-example-generic" class="carousel slide pict" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="image/lunbo1.png" alt="..." style="height: 365px">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="image/lunbo2.png" alt="..." style="height: 365px">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="image/lunbo3.png" alt="..." style="height: 365px">
                    <div class="carousel-caption">
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <!--新闻-->
    <div class="news">
        <div class="row">
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="image/webOne.png" alt="">
                </div>
                <p class="fontOne">自从有了这个6个插件...</p>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="image/webTwo.png" alt="">
                </div>
            </div>
            <p class="fontTwo">学会这个布局然你的页面飞起</p>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="image/webThree.png" alt="">
                </div>
                <p class="fontThree">你的一天会想我一样吗</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="image/webFour.png" alt="">
                </div>
                <p class="fontFour">详解flex布局彻底学会</p>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="image/webFIve.png" alt="">
                </div>
                <p class="fontFive">超级烧脑的推理小说</p>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="image/webSix.png" alt="">
                </div>
                <p class="fontSix">建模带你轻轻松松月入过万</p>
            </div>
        </div>
    </div>
</div>
<!--广告部分-->
<div class="advertising">
    <div class="iconfont icon-dianputuiguang advert"><span class="allFont"></span>推广</div>
    <div class="Wlist">观看列表</div>
    <div class="advertNav">
        <ul>
            <li><img src="image/titleOne.png" alt="">
                <div class="btntitle">广告</div>
                <a class="as">每天剪辑一小时在家接单赚<br>外快</a>
            </li>
            <li><img src="image/titleTwo.png" alt="">
                <div class="btntitle">广告</div>
                <a class="as">每天剪辑一小时在家接单赚<br>外快</a>
            </li>
            <li><img src="image/titleThree.png" alt="">
                <div class="btntitle">广告</div>
                <a class="as">曾现在学剪辑,下班在家接单多<br>赚点外快</a></li>
            <li><img src="image/titleFour.png" alt="">
                <div class="btntitle">广告</div>
                <a class="as">为什么我这么优秀还没发脱单?</a></li>
            <li><img class="note" src="image/webFIve.png" alt=""></li>
        </ul>
    </div>
</div>
<!--手机广告-->
<div class="phoneTitle">
    <img src="image/phone.png" alt="" width="100%">
</div>
<!--赛事部分-->
<div class="advertising saishi">
    <div class="iconfont icon-fenlei-saishi advert"><span class="allFont">赛事</span></div>
    <div class="Wlist">观看列表</div>
    <div class="advertNav">
        <ul>
            <li><img src="image/gameOne.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">[直播]2021第五人格IVL秋季赛</a>
            </li>
            <li><img src="image/gameTwo.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">萧瑟|大家好我是萧瑟,快来关注<br>我的频道吧</a>
            </li>
            <li><img src="image/gameThree.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">[BLG] 2021夏季赛纪录: 破茧</a></li>
            <li><img src="image/gameFour.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">[直播]永劫无间世界冠军赛!</a></li>
            <li><img class="note" src="image/zhuanlan.png" alt=""></li>
        </ul>
    </div>
</div>
<!--动画部分-->
<div class="advertising animate">
    <div class="iconfont icon-kaishihuifang advert"><span class="allFont">动画</span></div>
    <div class="Wlist">观看列表</div>
    <div class="advertNav animateNav">
        <ul>
            <li><img src="image/animateOne.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">离谱!谁教你怎么剪天官赐<br>福的?</a>
            </li>
            <li><img src="image/animateTwo.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">给你的好朋友送一个小天<br>屎把!</a>
            </li>
            <li><img src="image/animateThree.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">小时候喝了500瓶脉动，笑<br>死，根本躺不下</a></li>
            <li><img src="image/animateFour.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">盘点全网动漫cos合集 来看<br>看有你喜欢撕漫男</a></li>
            <div class="moreList">
                <h1>排行榜</h1>
                <div class="btnMore">更多 ></div>
                <ul>
                    <li><span>1</span><img src="image/paihang.png" alt=""><a href=""
                                                                             class="alone">新作高产!<br>老番完结!2022年</a></li>
                    <li><span>2</span><a href="" class="alist">【手书】Lovely【哈利波特20周年】</a></li>
                    <li><span>3</span><a href="" class="alist">当催逝员多是一件美事啊哈哈哈哈</a></li>
                    <li><span>4</span><a href="" class="alist">史上最大规模! 100位up主小说接龙</a></li>
                    <li><span>5</span><a href="" class="alist">国王排名OP牌[BOY]手语班【3D】</a></li>
                    <li><span>6</span><a href="" class="alist">仙王的日常生活 第二季</a></li>
                    <li><span>7</span><a href="" class="alist">他用10元创业，花4年做国产动漫</a></li>
                    <li><span>8</span><a href="" class="alist">良心之作！这些动画让我跪着看完！</a></li>
                </ul>
            </div>
            <li><img src="image/animateFive.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">【原神动画手书】Who are <br>you?</a>
            </li>
            <li><img src="image/animateSix.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">[光遇/光遇私设]豪门贵族系<br>列《为王》</a>
            </li>
            <li><img src="image/animateSev.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">年少不知阿姨好.....</a>
            </li>
            <li><img src="image/animateEig.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">[动漫名录02]艰难前行!<br>《进击的巨人》</a>
            </li>
        </ul>
    </div>
</div>
<!--汽车部分-->
<div class="advertising sport">
    <div class="iconfont icon-qiche advert"><span class="allFont">汽车</span></div>
    <div class="Wlist">观看列表</div>
    <div class="advertNav animateNav">
        <ul>
            <li><img src="image/carOne.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">75岁日本老翁扎根河南当农民<br>推广循环农业</a>
            </li>
            <li><img src="image/carTwo.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">红旗h9个月车主最真实的体会<br>给想买这辆人的建议</a>
            </li>
            <li><img src="image/carThree.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">山寨配件洗脑令人发指对线<br>记录曝光</a></li>
            <li><img src="image/carFour.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">在警队的一天是什么样子的?<br>中国警察的故事</a></li>
            <div class="moreList">
                <h1>排行榜</h1>
                <div class="btnMore">更多 ></div>
                <ul>
                    <li><span>1</span><img src="image/carTitle.png" alt="">
                        <a href="" class="alone"> 握草！这司机<br>驾龄得按世纪算</a></li>
                    <li><span>2</span><a href="" class="alist">在警队的一天是什么样子的？</a></li>
                    <li><span>3</span><a href="" class="alist">三句话让谭sir送你驾照18分</a></li>
                    <li><span>4</span><a href="" class="alist">这次真栽了，我被警察按住了…</a></li>
                    <li><span>5</span><a href="" class="alist">【半佛】一个基础的4S店防坑指南。</a></li>
                    <li><span>6</span><a href="" class="alist">【总结】惊了！汤姆受过的攻击竟有这…</a></li>
                    <li><span>7</span><a href="" class="alist">【石之海】来的律师好像不太对劲。</a></li>
                    <li><span>8</span><a href="" class="alist">【探窗】开口跪！单曲循环停不下</a></li>
                </ul>
            </div>
            <li><img src="image/carFive.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">38号的凡尔赛已运到北京,请<br>东风雪铁龙队员检查</a>
            </li>
            <li><img src="image/carSix.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">硬生生把布加迪走成了宠物</a>
            </li>
            <li><img src="image/carSev.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">中国汽车,万能"万国牌"里真正<br>突围吗?</a>
            </li>
            <li><img src="image/carEig.png" alt="">
                <div class="gametitle iconfont icon-zhibozhong">直播中</div>
                <a class="as">驾考界扛把子,"血色玫瑰"<br>又来祸害教练了</a>
            </li>
        </ul>
    </div>
</div>
<!--底部连接部分-->
<div class="footer">
    <div class="message">
        <div class="link">
            <div class="bili"> bilibili</div>
            <dl class="firstdl">
                <dt><a href="">关于我们</a></dt>
                <dt><a href="">联系我们</a></dt>
                <dt><a href="">用户协议</a></dt>
                <dt><a href="">加入我们</a></dt>
            </dl>
            <dl class="seconddl">
                <dt><a href="">友情链接</a></dt>
                <dt><a href="">隐式政策</a></dt>
                <dt><a href="">bilibili认证</a></dt>
                <dt><a href="">investor</a></dt>
                <dt><a href="">relations</a></dt>
            </dl>
            <div class="door">传送门</div>
            <dl class="threedl">
                <dt><a href="">协议汇总</a></dt>
                <dt><a href="">活动中心</a></dt>
                <dt><a href="">活动专题页</a></dt>
                <dt><a href="">侵权申诉</a></dt>
            </dl>
            <dl class="fourdl">
                <dt><a href="">帮助中心</a></dt>
                <dt><a href="">用户反馈论坛</a></dt>
                <dt><a href="">壁纸站</a></dt>
                <dt><a href="">广告合作</a></dt>
            </dl>
            <dl class="fivedl">
                <dt><a href="">名人堂</a></dt>
                <dt><a href="">MCN管理中心</a></dt>
                <dt><a href="">高级弹幕</a></dt>
                <dt><a href="">品牌号官网</a></dt>
            </dl>
        </div>
    </div>
    <div class="qudao">
        <div class="tubiao">
            <span class="iconfont icon-xiazai"><br><a href="">下载App</a></span>
            <span class="iconfont icon-gongyizhongxin"><br><a href="">公益</a></span>
            <span class="iconfont icon-shejiaotubiao-42"><br><a href="">新浪微博</a></span>
            <span class="iconfont icon-weixin"><br><a href="">官方微信</a></span>
        </div>
    </div>
</div>
<!--尾部-->
<div class="last">
    <div class="lastfooter">
        <img src="image/partner.png" alt="" style="width: 160px;height: 120px"><br>
        <img src="image/pic962110.png" alt="">
        <a href="" class="yingye">营业执照</a>
        <span>
    信息网络传播视听节目许可证：0910417 网络文化经营许可证 沪网文【2019】3804-274号 广播电视节目制作经营许可证：（沪）字第01248号<br>
     增值电信业务经营许可证 沪B2-20100043 互联网ICP备案：沪ICP备13002172号-3 出版物经营许可证 沪批字第U6699 号<br>
    互联网药品信息服务资格证 沪-非经营性-2016-0143 营业性演出许可证 沪市文演（经）00-2253<br>
    不良信息举报邮箱：help@bilibili.com | 涉未成年举报邮箱：teenprotect@bilibili.com | 不良信息举报电话：4006262233转1<br>
上海互联网举报中心 | 12318全国文化市场举报网站 | 沪公网安备31011002002436号 | 儿童色情信息举报专区 | 扫黄打非举报<br>
网上有害信息举报专区：中国互联网违法和不良信息举报中心<br>
亲爱的市民朋友，上海警方反诈劝阻电话“96110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。<br>
公司名称：上海宽娱数码科技有限公司|公司地址：上海市杨浦区政立路485号|电话：021-25099888</span>
    </div>
</div>
</body>
</html>
